// import React from 'react'
import { Table, Space, Button , Popconfirm, message } from 'antd'
import { useAntdTable } from 'ahooks'
import { ColumnsType } from 'antd/lib/table'
import { pageArticle , deleteArticle} from '@/service/article'
import { useNavigate } from 'react-router-dom'
import { formatTime } from '@/utils'
import './index.less'


export default function () {

  const { tableProps , run:reload } = useAntdTable(async ({ current , pageSize}) => {
    const {records , total } = await pageArticle({
      current,
      pageSize
    })
    return {
      total,
      list:records
    }
  })

  const navigate = useNavigate()

  const columns:ColumnsType<any> = [
    {
      title: "标题",
      dataIndex: 'title',
      align:'center'
    },
    {
      title: "描述",
      dataIndex:'article_desc',
      align:'center'
    },
    {
      title: "类型",
      dataIndex:'article_type_id',
      align: 'center',
      render: (dom, record) => {
        const type = record.blog_type
        if (type === "note") {
          return "随笔"
        } else if (type === "book") {
          return "读书"
        } else {
          return "博客"
        }
      }
    },
    {
      title: "创建时间",
      dataIndex:'create_time',
      align: 'center',
      render:(_ , record)=> formatTime(record.create_time)
    },
    {
      title: "更新时间",
      dataIndex:'updated_time',
      align:'center',
      render:(_ , record)=> formatTime(record.updated_time)
    },
    {
      title: "操作",
      width:150,
      align:'center',
      render: (_ , record) => {
        return (
          <Space>
            <Popconfirm
              title="确认是否删除"
              onConfirm={async () => {
                const response = await deleteArticle({ id: record.id })
                if (response) {
                  message.success("删除成功")
                  reload({...tableProps.pagination})
                } else {
                  message.error("删除失败")
                }
              }}
            >
              <Button type="link" danger>删除</Button>
            </Popconfirm>
            <Button type="link" onClick={()=> navigate(`/admin_edit/${record.id}?from=article`) }>编辑</Button>
          </Space>
        )
      }
    },
  ]
  

  return (
    <div>
      <div className="action">
        <Button type="primary" onClick={() => navigate(`/admin_edit/-1?from=article`) }>新增</Button>
      </div>
      <Table bordered size="small" columns={columns} {...tableProps} rowKey="id" />
    </div>
  )
}